<template>
    <div class="text-white overflow-hidden px-[40px]">
      <div class="flex items-center justify-between">
        <RunningState :data="data.status" />
        <FaultStatistics :data="data.error" />
      </div>
      <DevicesList />
    </div>
  </template>
  <script setup lang="ts">
  import RunningState from './components/RunningState.vue';
  import FaultStatistics from './components/FaultStatistics.vue';
  import DevicesList from './components/DevicesList.vue';
  import { apiGetDeviceStatistic } from '@/http/api';
  import { iDeviceStatistic } from '@/interface/iDeviceStatistic';
  const data = ref<iDeviceStatistic>({
    type: [],
    status: {
      running: 0,
      offline: 0,
      idle: 0,
      error: 0
    },
    error: {
      warning: 0,
      normal: 0,
    },
  });
  const getData = async () => {
    try {
      const res = await apiGetDeviceStatistic();
  
      data.value = res.data;
    } catch (error) {}
  };
  onMounted(() => {
    getData();
  });
  </script>
  <style lang="scss" scoped></style>
  